<main *ngIf="package != null">
  <div class="detail-header">
    <h2 class="title">{{ package.name }} {{ package.version }}</h2>
    <div class="metadata">
      Published <span>{{ package.createdAt | date: "mediumDate" }}</span>
      <div class="tags">
        <span class="package-tag" *ngFor="let tag of package.tags"
          >{{ tag }}</span
        >
      </div>
    </div>
  </div>

  <div class="detail-container">
    <ul class="detail-tabs-header">
      <li
        [class.-active]="activeTab == 0"
        (click)="activeTab = 0"
        class="tab-button"
        role="button"
      >
        README.md
      </li>
      <li
        [class.-active]="activeTab == 1"
        (click)="activeTab = 1"
        class="tab-button"
        role="button"
      >
        CHANGELOG.md
      </li>
      <!-- <li class="tab" data-name="-installing-tab-" role="button">Installing</li> -->
      <li
        [class.-active]="activeTab == 2"
        (click)="activeTab = 2"
        class="tab-button"
        role="button"
      >
        Versions
      </li>
    </ul>
    <div class="detail-tabs-content main">
      <section
        class="tab-content markdown-body"
        [class.-active]="activeTab == 0"
        id="readme"
      ></section>
      <section
        class="tab-content markdown-body"
        [class.-active]="activeTab == 1"
        id="changelog"
      ></section>
      <section class="tab-content" [class.-active]="activeTab == 2">
        <table class="version-table">
          <thead>
            <tr>
              <th>Version</th>
              <th>Uploaded</th>
              <th class="documentation" width="60">Documentation</th>
              <th class="archive" width="60">Archive</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let item of package.versions">
              <td>
                <strong
                  ><a [routerLink]="getDetailUrl(package.name, item.version)"
                    >{{ item.version }}</a
                  ></strong
                >
              </td>
              <td>{{ item.createdAt | date: "mediumDate" }}</td>
              <td class="documentation">
                <a
                  href="/documentation/{{ package.name }}/{{ item.version }}/"
                  rel="nofollow"
                  title="Go to the documentation of {{ package.name }} {{
                    item.version
                  }}"
                >
                  <img
                    src=""
                    alt="Go to the documentation of {{ package.name }} {{
                  item.version }}"
                  />
                </a>
              </td>
              <td class="archive">
                <a
                  href="/packages/{{ package.name }}/versions/{{ item.version }}.tar.gz"
                  title="Download {{ package.name }} {{ item.version }} archive"
                >
                  <img
                    src=""
                    alt="Download {{ package.name }} {{ item.version }} archive"
                  />
                </a>
              </td>
            </tr>
          </tbody>
        </table>
      </section>
    </div>

    <aside class="detail-info-box">
      <h3 class="title">About</h3>
      <p>{{ package.description }}</p>
      <p>
        <a class="link" href="{{ package.homepage }}">Homepage</a><br />
        <a
          class="link"
          href="/documentation/{{ package.name }}/{{ package.version }}/"
          >API reference</a
        ><br />
      </p>

      <h3 class="title">Author</h3>
      <div>
        <div class="author" *ngFor="let email of package.authors">
          <a href="mailto:{{ email }}" title="Email {{ email }}"
            ><i class="email-icon"></i
          ></a>
          <a
            [routerLink]="getListUrl('email:'+email)"
            title="Search packages with {{ email }}"
            rel="nofollow"
            ><i class="search-icon"></i
          ></a>
          {{ email }}
        </div>
      </div>

      <h3 class="title">Uploader</h3>
      <div>
        <div class="author" *ngFor="let email of package.uploaders">
          <a href="mailto:{{ email }}" title="Email {{ email }}"
            ><i class="email-icon"></i
          ></a>
          <a
            [routerLink]="getListUrl('email:'+email)"
            title="Search packages with {{ email }}"
            rel="nofollow"
            ><i class="search-icon"></i
          ></a>
          {{ email }}
        </div>
      </div>

      <h3 class="title">Dependencies</h3>
      <p>
        <span *ngFor="let dep of package.dependencies; let isLast = last">
          <a [routerLink]="getDetailUrl(dep)">{{ dep }}</a>{{ isLast ? "" : ", "
          }}
        </span>
      </p>

      <h3 class="title">More</h3>
      <p>
        <a [routerLink]="getListUrl('dependency:'+package.name)" rel="nofollow"
          >Packages that depend on {{ package.name }}</a
        >
      </p>
    </aside>
  </div>
</main>

<main *ngIf="packageNotExists">
  <div class="not-exists">
    <div>This is not a private package, click link below to view it:</div>
    <a href="{{ pubDevLink }}" target="_blank" rel="nofollow"
      >{{ pubDevLink }}</a
    >
  </div>
</main>
